<template>
  <div>
    <el-container>
      <!-- 头部 -->
      <el-header>
        <h1 id="spart">Header</h1>
        
          <el-badge :value="12" class="item">
            <el-button size="small">评论</el-button>
          </el-badge>
      </el-header>
      <!-- 主体 -->
      <el-container>
        <!-- 侧边栏 -->
        <el-aside width="200px">Aside</el-aside>

        <!-- 内容 -->
        <el-main>
          <!-- 表单 -->
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="姓名">
              <el-input v-model="formInline.name" placeholder="输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="formInline.age" placeholder="性别">
                <el-option label="男" value="male"></el-option>
                <el-option label="女" value="female"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">添加</el-button>
            </el-form-item>
          </el-form>

          <!-- 表格 -->
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              label="日期"
              width="180">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.date }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="姓名"
              width="180">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <p>姓名: {{ scope.row.name }}</p>
                  <p>住址: {{ scope.row.address }}</p>
                  <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.name }}</el-tag>
                  </div>
                </el-popover>
              </template>
            </el-table-column>

            <el-table-column
              prop="age"
              label="性别"
              width="180">
            </el-table-column>

            <el-table-column
              prop="value"
              label="开关"
              width="180">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.value"
                  active-color="#13ce66"
                  inactive-color="#ff4949">
                </el-switch>
                <span style="padding-left:10px;">{{scope.row.value ? '已启用':'已禁用'}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row )">编辑</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete( scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  export default {
    data() {
      return { 
        // 开关
        // value: true,
        // 表单数据
        formInline: {
          name: '',
          age: ''
        },
        numberid:5,
        // 表格数据
        tableData: [
            {
          id:1,      
          date: '2016-05-02',
          age:'男',
          name: '王小虎',
          value: false,
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id:2,
          date: '2016-05-04',
          age:'男',
          name: '王小虎',
          value: true,
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          id:3,
          date: '2016-05-01',
          age:'男',
          name: '王小虎',
          value: false,
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          id:4,
          date: '2016-05-03',
          age:'女',
          name: '王小',
          value: true,
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    },
    methods: {
    //   时间格式
      item(){
        let add = new Date()
        return add.toLocaleString()
      },
    //   添加
      onSubmit() {
        // 判断不能添加的
        if (this.formInline.name ==='' && this.formInline.age === '') return alert("输入不为空") 
        if (this.formInline.name ==='' )  return alert("姓名不为空") 
        if (this.formInline.age ==='' ) return alert("性别不为空")  
        
        // 创建对象
        const obj = {
            id :this.numberid,
            date:this.item(),
            name:this.formInline.name,
            age:this.formInline.age,
            value:true,
            address:'上海市普陀区金沙江路 1516 弄'
        }
        // 添加到数组中
        this.tableData.push(obj)
        // 清空输入框
        this.formInline.name = ''
        this.formInline.age = ''
        // id自增
        this.numberid++

        // console.log(new Date());
        // console.log(this.formInline); 
      },

      handleEdit(index, row) {
        console.log(index, row);
      },
    //   删除
      handleDelete(row) {
        console.log(row);
        this.tableData = this.tableData.filter(item => item.id !== row)
      }
    }
  };

</script>

<style>  
*{
  margin: 0;
  padding: 0;
}
/* 标记 */
.item {
  position: absolute;
  left: 45%;
  top: 20%;
}

/* 布局容器 */
.el-header {
    background-color: #3568ac;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px !important;
  }
  #spart{
    display: flex;
    color:#8df;
  }


  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #97a0a9;
    color: #333;  
  }
</style>